<!-- 用户信息修改 -->
<template>
    <el-dropdown @command="command">
        <span class="el-dropdown-link">
            <img class="avatar" :src="src" alt="用户头像">
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="edit">
                    <svg-icon name="yonghu1" style="margin-right:15px;font-size:24px"></svg-icon>
                    修改信息
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                    <svg-icon name="exit" style="margin-right:15px;font-size:24px"></svg-icon>
                    退出登录
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<script lang='ts' setup>
import { useLogin, useSystem } from '@/pinia';
import { ElMessageBox } from 'element-plus';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const LoginStore = useLogin()
const SystemStore = useSystem()
let src = computed(()=>{
    return import.meta.env.VITE_BASEURL + SystemStore.userinfo?.avatar
})

const command = (type: string) => {
    if (type === "edit") return router.push("/userinfo")
    if (type === "logout") return loginOut()
}

// 退出登录
const loginOut = () => {
    ElMessageBox.confirm(
        '正在退出登录，是否继续？',
        '提示',
        {
            confirmButtonText: '退 出',
            cancelButtonText: '取 消',
            type: 'warning',
        }
    )
        .then(() => {
            LoginStore.removeToken()
            sessionStorage.clear()
            router.push({
                path: "/login",
                replace: true
            })
        })

}
</script>
<style scoped lang="less">
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    cursor: pointer;
    margin: 0px 5px;

    &:hover {
        opacity: 0.7;
    }
}
</style>